<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <link rel="stylesheet" href="css.css">-->
<!--    <script src="js.js"></script>-->
<!--</head>-->
<!--<body>-->
<!--<section>-->
<!--    <div class="navbar">-->
<!--        <ul class="nav">-->
<!--        </ul>-->
<!--    </div>-->
<!--</section>-->
<!--&lt;!&ndash; ★ 定义script模板 ★ &ndash;&gt;-->
<!--<script type="text/template" id="tpl">-->
<!--    <li><a href="{{site}}" class="link">{{name}}</a></li>-->
<!--</script>-->
<!--&lt;!&ndash; 加载js &ndash;&gt;-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        table {
            border-spacing: 0;
            width: 100%;
            border: 1px solid #ddd;
        }

        th {
            cursor: pointer;
        }

        th, td {
            text-align: left;
            padding: 16px;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2
        }
    </style>
</head>
<body>

<p><strong>点击表头对表格进行排序</strong></p>
<p>第一次单击按钮时，排序方向为升序（A 到 Z）。
<p>再次点击，排序方向为降序（Z 到 A）。</p>

<table id="myTable">
    <tr>
        <!--0 代表 name 字段，1 代表 url 字段-->
        <th onclick="sortTable(0)">Name</th>
        <th onclick="sortTable(1)">url</th>
    </tr>
    <tr>
        <td>Runoob</td>
        <td>www.runoob.com</td>
    </tr>
    <tr>
        <td>Google</td>
        <td>www.google.com</td>
    </tr>
    <tr>
        <td>Baidu</td>
        <td>www.baidu.com</td>
    </tr>
    <tr>
        <td>Zhihu</td>
        <td>www.zhihu.com</td>
    </tr>
    <tr>
        <td>Weibo</td>
        <td>www.weibo.com</td>
    </tr>
    <tr>
        <td>Taobao</td>
        <td>www.taobao.com</td>
    </tr>
</table>

<script>
    function sortTable(n) {
        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
        table = document.getElementById("myTable");
        switching = true;
        // 设置升序排列
        dir = "asc";
        /* 设置一个循环语句 */
        while (switching) {
            // 设置循环结束标记
            switching = false;
            rows = table.rows;
            /* 循环列表，从第二行开始 */
            for (i = 1; i < (rows.length - 1); i++) {
                // 设置元素是否调换位置
                shouldSwitch = false;
                /* 获取要比较的元素,
                one from current row and one from the next: */
                x = rows[i].getElementsByTagName("TD")[n];
                y = rows[i + 1].getElementsByTagName("TD")[n];
                /* 判断是否将下一个元素与当前元素进行切换 (asc 或 desc):  */
                if (dir == "asc") {
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        // 设置调换元素标记，并结束当前循环
                        shouldSwitch = true;
                        break;
                    }
                } else if (dir == "desc") {
                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        // 设置调换元素标记，并结束当前循环
                        shouldSwitch = true;
                        break;
                    }
                }
            }
            if (shouldSwitch) {
                /* 如果元素调换位置设置为 true，则进行对调操作 */
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
                // 每次对调完成时，将 switchcount 增加 1
                switchcount ++;
            } else {
                /* 如果完成所有元素的排序且 direction 设置为 "asc",这时就将 direction 设置为 "desc" 并再次执行循环 */
                if (switchcount == 0 && dir == "asc") {
                    dir = "desc";
                    switching = true;
                }
            }
        }
    }
</script>

</body>
</html>